package com.example.app.pages.main.home.addNew.addRecord

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.example.app.components.MyIcon.MyNavigationIcon
import com.example.app.components.MyTab.MyPrimaryTabRow
import com.example.app.components.MyTab.MyTab
import com.example.app.components.MyText.MyText
import com.example.app.components.MyTopBar.MyTopBar
import com.example.app.pages.main.home.me.viewModel.AccountType
import com.example.app.pages.main.home.me.viewModel.AddNewViewModel
import com.example.app.viewmodel.RouteViewModel
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.PagerState
import kotlinx.coroutines.launch

@OptIn(
    ExperimentalMaterial3Api::class,
    ExperimentalPagerApi::class
)
@Composable
fun AddRecordTopBar(
    routeViewModel: RouteViewModel,
    accountType: State<AccountType>,
    titles: Array<AccountType>,
    addNewViewModel: AddNewViewModel,
    pageState: PagerState
) {
    val resources = LocalContext.current.resources
    val screenWidthDp = resources.displayMetrics.widthPixels / resources.displayMetrics.density
    var scope = rememberCoroutineScope()
    // MyTopBar 不能写在 MyScaffold的topbar里面，那样就做不到输入框嵌入背景的效果
    MyTopBar(
        showDivider = false,
        modifier = Modifier,
        navigationIcon = {
            MyNavigationIcon(

                tint = MaterialTheme.colorScheme.surface,
                onClick = {
                    routeViewModel.flowUpdate_curAddNewChild(null)
                }
            )
        },
        title = {
            //tab页签的标题
            Column {
                MyPrimaryTabRow(
                    contentColor = MaterialTheme.colorScheme.surface,
                    selectedTabIndex = accountType.value.index,
                    divider = {},
                    modifier = androidx.compose.ui.Modifier.width(screenWidthDp.dp / 2)
                ) {
                    titles.forEachIndexed { index, title ->
                        MyTab(
                            selected = accountType.value.index == index,
                            onClick = {
                                scope.launch {
                                    if (accountType.value == AccountType.INCOME) {
                                        addNewViewModel.flowUpdate_accountType(AccountType.PAY)
                                        pageState.animateScrollToPage(1)
                                    } else {
                                        addNewViewModel.flowUpdate_accountType(AccountType.INCOME)
                                        pageState.animateScrollToPage(0)
                                    }
                                }
                            },
                            text = {
                                if (index === 0) {
                                    MyText(text = AccountType.INCOME.title)
                                } else {
                                    MyText(text = AccountType.PAY.title)
                                }
                            })
                    }
                }
            }
        }
    )
}